﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="css/layui.css" media="all"/>
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/table.css"/>
</head>

<body>
<div class="admin-main">
    <form class="layui-form">
        <div class="layui-form-item" style="margin:0;">
            <label class="layui-form-label">姓名</label>

            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux" style="padding:0;">
                <button lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i>

                </button>
            </div>
            <a href="javascript:;" class="layui-btn" id="add">
                <i class="layui-icon">&#xe608;</i>
            </a>
        </div>
    </form>
    <hr>
    <div class="layui-field-box layui-form">
        <table class="layui-table admin-table">
            <thead>
            <tr>
                <th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                <th>姓名</th>
                <th>账户</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="content">
            </tbody>
        </table>
    </div>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>
<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.result, function(index, item){ }}
    <tr>
        <td><input type="checkbox" lay-skin="primary"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.username }}</td>
        <td>
            <a href="javascript:;" data-id="{{ item.id }}" data-opt="preview"
               class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
            <a href="javascript:;" data-id="{{ item.id }}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
            <a href="javascript:;" data-id="{{ item.id }}" data-opt="del"
               class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
        </td>
    </tr>
    {{# }); }}
</script>
<script type="text/javascript" src="layui.js"></script>
<script>
    layui.config({
        base: 'js/'
    });

    layui.use(['paging', 'form'], function () {
        var $ = layui.jquery,
                paging = layui.paging(),
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer, //获取当前窗口的layer对象
                form = layui.form();

        paging.init({
            openWait: true,
            url: '/back/user/page', //地址
            elem: '#content', //内容容器
            params: { //发送到服务端的参数
            },
            type: 'GET',
            tempElem: '#tpl', //模块容器
            pageConfig: { //分页参数配置
                elem: '#paged', //分页容器
                pageSize: 9 //分页大小
            },
            success: function () { //渲染成功的回调
                //alert('渲染成功');
            },
            fail: function (msg) { //获取数据失败的回调
                //alert('获取数据失败')
            },
            complate: function () { //完成的回调
                //alert('处理完成');
                //重新渲染复选框
                form.render('checkbox');
                form.on('checkbox(allselector)', function (data) {
                    var elem = data.elem;

                    $('#content').children('tr').each(function () {
                        var $that = $(this);
                        //全选或反选
                        $that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
                        form.render('checkbox');
                    });
                });

                //绑定所有编辑按钮事件
                $('#content').children('tr').each(function () {
                    var $that = $(this);
                    $that.children('td:last-child').children('a[data-opt=edit]').on('click', function () {
                        $.get('/back/user/' + $(this).data('id'), null, function (data) {
                            var result = data.result;
                            $.get('user/edit', null, function (form) {
                                layer.open({
                                    type: 1,
                                    title: '编辑用户',
                                    content: form,
                                    btn: ['保存', '取消'],
                                    shade: false,
                                    offset: ['20px', '20%'],
                                    area: ['600px', '400px'],
                                    zIndex: 19950924,
                                    maxmin: true,
                                    yes: function (index) {
                                        //触发表单的提交事件
                                        $('form.layui-form').find('button[lay-filter=edit]').click();
                                    },
                                    full: function (elem) {
                                        var win = window.top === window.self ? window : parent.window;
                                        $(win).on('resize', function () {
                                            var $this = $(this);
                                            elem.width($this.width()).height($this.height()).css({
                                                top: 0,
                                                left: 0
                                            });
                                            elem.children('div.layui-layer-content').height($this.height() - 95);
                                        });
                                    },
                                    success: function (layero, index) {
                                        var form = layui.form();
                                        form.render();
                                        setFromValues(layero, result);
                                        layero.find(":input[name='username']").attr("disabled", "");
                                        form.on('submit(edit)', function (data) {
                                            $.ajax({
                                                url: '/back/user/' + result.id,
                                                type: 'put',
                                                data: data.field,
                                                dataType: "json",
                                                success: function () {
                                                    layerTips.msg('更新成功');
                                                    layerTips.close(index);
                                                    location.reload();
                                                }

                                            });
                                            //这里可以写ajax方法提交表单
                                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                        });
                                    }
                                });
                            });
                        });
                    });
                    $that.children('td:last-child').children('a[data-opt=del]').on('click', function () {
                        var id = $(this).data('id');
                        layer.confirm('确定删除数据吗？', null, function (index) {
                            $.ajax({
                                url: "/back/user/" + id,
                                type: "DELETE",
                                success: function (data) {
                                    console.log(data);
                                    if (data.rel == true) {
                                        layerTips.msg("移除成功！");
                                        location.reload();
                                    } else {
                                        layerTips.msg("移除失败！")
                                        location.reload();
                                    }
                                }
                            });
                            layer.close(index);
                        });
                    });
                    $that.children('td:last-child').children('a[data-opt=preview]').on('click', function () {
                        $.get('/back/user/' + $(this).data('id'), null, function (data) {
                            var result = data.result;
                            $.get('user/edit', null, function (form) {
                                layer.open({
                                    type: 1,
                                    title: '预览用户',
                                    content: form,
                                    shade: false,
                                    offset: ['20px', '20%'],
                                    area: ['600px', '400px'],
                                    zIndex: 19950924,
                                    maxmin: true,
                                    yes: function (index) {
                                        //触发表单的提交事件
                                        $('form.layui-form').find('button[lay-filter=edit]').click();
                                    },
                                    full: function (elem) {
                                        var win = window.top === window.self ? window : parent.window;
                                        $(win).on('resize', function () {
                                            var $this = $(this);
                                            elem.width($this.width()).height($this.height()).css({
                                                top: 0,
                                                left: 0
                                            });
                                            elem.children('div.layui-layer-content').height($this.height() - 95);
                                        });
                                    },
                                    success: function (layero, index) {
                                        var form = layui.form();
                                        form.render();
                                        layero.find(":input").attr("disabled", "");
                                        setFromValues(layero, result);
                                    }
                                });
                            });
                        });
                    });
                });

            },
        });
        var addBoxIndex = -1;
        $('#add').on('click', function () {
            if (addBoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('user/edit', null, function (form) {
                addBoxIndex = layer.open({
                    type: 1,
                    title: '添加用户',
                    content: form,
                    btn: ['保存', '取消'],
                    shade: false,
                    offset: ['20px', '20%'],
                    area: ['600px', '400px'],
                    zIndex: 19950924,
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
                        var win = window.top === window.self ? window : parent.window;
                        $(win).on('resize', function () {
                            var $this = $(this);
                            elem.width($this.width()).height($this.height()).css({
                                top: 0,
                                left: 0
                            });
                            elem.children('div.layui-layer-content').height($this.height() - 95);
                        });
                    },
                    success: function (layero, index) {
                        var form = layui.form();
                        form.render();
                        form.on('submit(edit)', function (data) {
                            $.ajax({
                                url: '/back/user',
                                type: 'post',
                                data: data.field,
                                dataType: "json",
                                success: function () {
                                    layerTips.msg('保存成功');
                                    layerTips.close(index);
                                    location.reload();
                                }

                            });
                            //这里可以写ajax方法提交表单
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                        //console.log(layero, index);
                    },
                    end: function () {
                        addBoxIndex = -1;
                    }
                });
            });
        });
    });
    function setFromValues(el, data) {
        for (var p in data) {
            el.find(":input[name='" + p + "']").val(data[p]);
        }
    }
</script>
</body>

</html>